<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        /*
            remove()  删除元素节点   返回值就是我们删除的这个节点   并不会保留这个元素节点上之前的事件和行为
            detach()  删除元素节点   返回值就是我们删除的这个节点   会保留这个元素节点上之前的事件和行为

            ready  事件  $(document).ready()  事件触发在当前的document加载完成以后执行
            window
                document加载完毕肯定是在window加载完毕之前

            JQuery  标签间的内容  HTML()  相当于innerHTML()
            JQuery  标签间纯文本  text()  相当于innerText()

            参数都是选择器
                siblings()  用来除当前节点外，所有的兄弟节点
                nextAll()  prevAll()
                parentsUntil()  nextUntil()  prevUntil()  从某某某开始到某某某结束

            
            parent()  获取父节点
            parents()  获取父节点们  参数选择器
            closest()  必须传入参数，参数也是选择器，只获取第一个符合条件的元素 从自己开始去找

            wrap()   每一个获取到的元素节点单独包装
            wrapAll()   整体包装
            wrapInner()     内部包装
            unwrap()    删除包装 删除上面一层包装，不包括body节点

            clone()  默认只会克隆节点本身，并不会克隆我们元素节点的行为和事件
            clone(true)  可以克隆元素节点的行为和事件

            add()  可以将多个选择器拼接在一起
            slice(start，end)  获取指定的节点，包括开始不包括结束 

            serialize()    将我们表单中的数据拼接成queryString(查询字符串)   name=value&name2=value2
            search          ?name=value&name2=value2
            querystring     name=value&name2=value2
            serializeArray() 将表单数据拼接成数组

            trigger()    主动触发 可以触发官方定义的事件外 还可以触发我们自定义的事件

        */
       $(function(){
        //    $("button").on("click",{username:"llll"},function(ev){
        //        alert(ev.data);//拿到传入的参数
        //        alert(ev.data.username);
        //    })

           $("#play").on("play",function(){
               alert("开始播放歌曲");
           })
           $("#play").on("next",function(){
               alert("下一首");
           })
           $("button").eq(0).click(function(){
               $("#play").trigger("play");
           })
           $("button").eq(1).click(function(){
               $("#play").trigger("next");
           })
       })
    </script>
</head>
<body>
    <button>播放</button>
    <button>下一首</button>
    <div id="play"></div>
</body>
</html>